<script setup lang="ts">
import { ref, defineExpose, defineProps, watch } from "vue";
import { Field, CellGroup } from "vant";
const codeText = ref("发送验证码");
const sms = ref("");
let propsData = defineProps<{
  times: number;
}>();
const times = ref();
const isdis = ref(false);
//
watch(
  () => propsData.times,
  (newVal, oldVal) => {
    times.value = newVal;
  },
  { immediate: true }
);
// 暴露验证码
defineExpose({
  sms,
});
const emits = defineEmits<{ (e: "getCodeValues", code: boolean): void }>();
const sendCode = () => {
  // alert("验证码已发送");
  emits("getCodeValues", true);
  isdis.value = true;
  times.value--;
  codeText.value = times.value + "S后重发";
  // 倒计时
  var timer = setInterval(() => {
    times.value--;
    codeText.value = times.value + "S后重发";
    if (times.value === 0) {
      clearInterval(timer);
      times.value = 60;
      codeText.value = "重新获取验证码";
      isdis.value = false;
    }
  }, 1000);
};
</script>
<template>
  <CellGroup inset>
    <Field
      type="digit"
      v-model="sms"
      center
      label="验证码"
      placeholder="请输入验证码"
    >
      <template #button>
        <button
          :disabled="isdis"
          @click="sendCode"
          class="blut-font"
          :class="isdis == true ? 'dis-btn' : ''"
        >
          {{ codeText }}
        </button>
      </template>
    </Field>
  </CellGroup>
</template>
<style lang="scss" scoped>
::v-deep .van-field__label {
  width: auto;
  margin-right: 20px;
  label {
    color: #666666;
  }
}
::v-deep .van-field__button {
  position: relative;
  &::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 1px;
    background-color: #eeeeee;
    left: -5px;
    top: 3px;
  }
}
.blut-font {
  color: #1677ff;
  background: #fff;
  border: none;
}
.dis-btn {
  color: #999999;
}
</style>
